<template>
	<view>
		<view class="blue-column-border-box">
			<view class="blue-border"></view>
			<view class="blue-text">个人中心</view>
		</view>
		<view class="gray-box">
			<view class="top-row-box">
				<text class="left left-text">昵称</text>
				<text class="right right-text">{{myuserinfo.name}}</text>
			</view>
			<view class="top-row-box">
				<text class="left left-text">姓名</text>
				<text class="right right-text">{{myuserinfo.truename}}</text>
			</view>	
			<view class="top-row-box">
				<text class="left left-text">手机号码</text>
				<text class="right right-text">{{myuserinfo.phone}}</text>
			</view>
			<view class="top-row-box">
				<text class="left left-text">电子邮箱</text>
				<text class="right right-text">{{myuserinfo.email}}</text>
			</view>
			<view class="top-row-box">
				<text class="left left-text">家庭住址</text>
				<text class="right right-text">{{myuserinfo.address}}</text>
			</view>	
			<view class="top-row-box">
				<text class="left left-text">我的年龄</text>
				<text class="right right-text">{{myuserinfo.age}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		error
	} from '@/common/js/errorTips.js'
	import {
		selectUserByid,
	} from '@/common/api/jh/doctor.js'
	export default {
		data() {
			return {
				myuserinfo:{}
			}
		},
		methods: {
			selectUserByid(){
				var id = uni.getStorageSync("userLoginInfo.id")
				console.log(id+"---------")
				if(id!=undefined&&id!=''&&id!=null){
					selectUserByid(Number(id)).then(res => {
						this.myuserinfo = res.data
					}).catch(() => {
						error('网络故障!')
					})
				}
			},
		},
		onLoad() {
			this.selectUserByid()
		}
	}
</script>

<style lang="scss">
	@import '@/common/scss/common.scss';
	@import '@/common/scss/form.scss';
	page{
		@extend .page-backgroud;
	}
	.gray-box{
		@extend .gray-border-box;
		.top-row-box{
			@include width-margin(95%, 100rpx);
			@include row-left-right(35%, 65%);
			line-height: 100rpx;
			.left-text{
				@include font-style(16px, bold, #000000);
			}
			.right-text{
				@include font-style(16px, 500, $gray-color);
			}
		}
		.bottom-row-box{
			@include width-margin(95%, 100rpx);
			@include row-left-right(50%, 50%);
			line-height: 100rpx;
			.right-text{
				width: 60%;
				@include font-style(16px, 500, $gray-color);
			}
			.left-icon-text-box{
				// width: 40%;
				height: 100%;
				@include flex-direction(row);
				align-items: center;
				.icon{
					@include icon-size(50rpx,50rpx);
					margin-right: 20rpx;
				}
				.left-text{
					@include font-style(16px, bold, #000000);
				}
			}
		}
		.top-row-box:not(:last-child){
			border-bottom: 1px solid $border-color;
		}
		.bottom-row-box:not(:last-child){
			border-bottom: 1px solid $border-color;
		}
	}
	// 按钮的颜色
	.button{
		@extend .button-box;
		margin-top: 50rpx;
	}
	.input-area{
		height: 50px;
	}
</style>
